<template>
  <div class="lottery-result" >
    <div class="lottery-kanban">
      <div class="image-wrapper">
        <img :src="data.imgUrl">
      </div>
      <div v-if="data.bigo" class="lottery-bigo">
        <div class="title highlight">
          恭喜您！
        </div>
        <div class="greetings">
          <p>
            抽中
            <span class="highlight">
              {{data.name}}
            </span>
          </p>
          <p class="after-success_tips">
            工作人员会在 5个工作日内联系你<br><span >请保持手机畅通</span>
          </p>
        </div>
      </div>
      <div v-else class="lottery-tks">
        <div v-if="!data.noChoice" class="title">很遗憾，没有中奖</div>
        <div class="remaining">
          <p>
            您还剩 <span class="highlight">{{data.remaining}}</span> 次抽奖机会
          </p>
        </div>
        <a @click="retry" v-if="data.remaining > 0" class="btn retry-btn" href="javascript: void 0;">
          再抽一次
        </a>
        <div v-else class="share-tips">
          <p>每日0点重置抽奖次数，没抽中的话请再接再厉~</p>
          <p>点击下面分享按钮，可获得额外抽奖机会</p>
        </div>
      </div>
    </div>
    <div class="share">
      <lottery-share :data="data" @success="afterLotteryShare">
      </lottery-share>
      <div v-if="data.bigo" class="bigo-share">
        <p>快分享给朋友炫耀一下，同时还有额外抽奖机会哦</p>
      </div>
      <p v-else class="retry-share">同一分享方式每天最多可获得2次额外抽奖机会</p>
    </div>
  </div>
</template>

<script>
  import LotteryShare from './lottery-share';

  export default {
    components: { LotteryShare },
    props: {
      data: {
        type: Object,
        default: () => ({})
      }
    },
    methods: {
      retry() {
        this.$emit('lottery-result-retry');
      },
      afterLotteryShare(platform) {
        this.$emit('lottery-result-share-success', platform);
      },
    }
  }
</script>

<style scoped lang="scss">
  @import '~common/style/variables.scss';
  img {
    width: 100%;
    height: auto;
  }
  .after-success_tips {
    line-height: 1.35em;
  }
  .addr-tips {
    color: $title-font-active-color;
  }
  .lottery-result {
    text-align: center;
    background-color: #ffffff;
    .share {
      padding: 0.6rem 0;
      color: #da0000;
      background-color: #f8f6fc;
      background-image: none;
      border-bottom-left-radius: 0.16rem;
      border-bottom-right-radius: 0.16rem;
      p {
        margin-top: 0.36rem;         
      }
      .bigo-share,
      .bigo-share p {
        color: $title-font-active-color;
      }
      .retry-share {
        color: #c8c8c8;
      }
    }
    .lottery-kanban {
      padding-bottom: 0.6rem;
    }
    .lottery-bigo {
      .title {
        text-indent: 0.72rem;
      }
    }
    .title {
      font-size: 0.72rem;
    }
    .greetings, .remaining, .share-tips {
      font-size: 0.34rem;
      color: #747474;
    }
    .highlight {
      color: $title-font-active-color;
    }
    .share-tips {
      margin-top: 0.46rem;
    }
    .btn {
      width: 4.8rem;
      height: 1.35rem;
      line-height: 1.35rem;
      display: inline-block;
      text-decoration: none;
      font-size: .56rem;
      color: #fff;
      text-align: center;
      background: url('~pages/app/assets/images/btn-lottery-try-again.png') no-repeat;
      background-size: cover;
    }
  }
  .image-wrapper {
    width: 4.2rem;
    height: 4.2rem;
    margin: 0 auto;

  }
</style>

<style lang="scss">
  .modal .lottery-result {
    margin-top: 1.96rem;
  }
  .modal .lottery-result.showAddr {
    margin-top: .76rem;
  }
</style>
